<template>
    <n-card title="系统状态" size="small" id="vc_systemStatus">
        <template #header-extra>
            <div style="position: absolute">
                <div style="position: relative; right: -0.375rem; top: calc(-0.875rem - 2px)">
                    <n-tooltip placement="bottom" trigger="hover">
                        <template #trigger>
                            <div
                                @click="auto_refresh = !auto_refresh"
                                :style="
                                    auto_refresh ? '--tbtn: green' : '--tbtn: hsla(174, 100%, 33%, 0.5)'
                                "
                                style="
                                    cursor: pointer;
                                    width: 1.25rem;
                                    height: 1.25rem;
                                    background-color: var(--tbtn);
                                    transform: translateX(-50%);
                                    clip-path: polygon(100% 0, 100% 100%, 0 0);
                                    border-radius: 0.25rem;
                                "></div>
                        </template>
                        开关自动刷新
                    </n-tooltip>
                </div>
            </div>
        </template>
        <div class="card-body">
            <div class="performance-item">
                <n-progress type="dashboard" gap-position="bottom" :percentage="data.cpu" />
                <div style="position: relative"><p class="progress-text">CPU</p></div>
            </div>
            <div class="performance-item">
                <n-progress type="dashboard" gap-position="bottom" :percentage="data.ram" />
                <div style="position: relative"><p class="progress-text">RAM</p></div>
            </div>
            <div class="performance-item">
                <n-progress type="dashboard" gap-position="bottom" :percentage="data.swap" />
                <div style="position: relative"><p class="progress-text">SWAP</p></div>
            </div>

            <div class="performance-item" style="width: auto">
                <p>
                    <span class="network-title">下载</span>
                    {{ data.network.download_kbps.toFixed(1) }}kbps
                </p>
                <p>
                    <span class="network-title">上传</span>
                    {{ data.network.upload_kbps.toFixed(1) }}kbps
                </p>
                <p>
                    <span class="network-title">接收</span>
                    {{ (data.network.total_input / 1024 / 1024).toFixed(1) }}MiB
                </p>
                <p>
                    <span class="network-title">发送</span>
                    {{ (data.network.total_output / 1024 / 1024).toFixed(1) }}MiB
                </p>
            </div>
        </div>
    </n-card>
</template>

<script setup lang="ts">
import axiosInstance from '@/utils/network/axios'
import { onBeforeMount, onBeforeUnmount, ref } from 'vue'

const auto_refresh = ref(true)

const data = ref({
    cpu: 0,
    ram: 0,
    swap: 0,
    network: {
        total_input: 0,
        total_output: 0,
        upload_kbps: 0,
        download_kbps: 0
    }
})
var timer: any = null
async function ContinutedGetServiceStatus() {
    timer = setInterval(() => {
        handleGetServiceStatus()
    }, 3000)
}
async function handleGetServiceStatus() {
    if (auto_refresh.value) {
        axiosInstance.get('/home/dashboard/system-status').then((response) => {
            data.value = response.data
        })
    }
}

onBeforeMount(() => {
    //console.log('mount')
    handleGetServiceStatus()
    ContinutedGetServiceStatus()
})
onBeforeUnmount(() => {
    //console.log('unmount')

    clearInterval(timer)
})
</script>

<style lang="scss" scoped>
@use '@/assets/style/sea-viewport';
#vc_systemStatus {
    @media (min-width: sea-viewport.$phone_min) {
        // max-width: var(--max_width_2items);
    }
}

.card-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 3rem;
    flex-wrap: wrap;
    @media (max-width: sea-viewport.$phone_max) {
        justify-content: center;
    }
}

.performance-item {
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    width: min-content;
    p.progress-text {
        position: absolute;
        font-size: 1.125rem;
        top: -1.75rem;
        text-align: center;
        width: 100%;
    }
    p .network-title {
        display: inline-block;
        width: 2.25rem;
    }
}
</style>
